<template>
    <div class="footer">
        <div class="footBox flex">
              <div class="foot-item active" v-if='$store.state.Index == 1'>
                  <img src="@/assets/img/home-active.png" alt="">
                  <p>首页</p>
              </div>
              <div class="foot-item" v-else='$store.state.Index != 1' @click='onHome'>
                  <img src="@/assets/img/home.png" alt="">
                  <p>首页</p>
              </div>
              <div class="foot-item active" v-if='$store.state.Index == 2'>
                  <img src="@/assets/img/me-active.png" alt="">
                  <p>用户</p>
              </div>
              <div class="foot-item" v-else='$store.state.Index != 2' @click='onUser'>
                  <img src="@/assets/img/me.png" alt="">
                  <p>用户</p>
              </div>
              <div class="shareBox">
                  <img src="@/assets/img/home-share.png" alt="" @click="onShare">
              </div>
              <div class="foot-item active" style="margin-left:1.3rem" v-if='$store.state.Index == 3'>
                  <img src="@/assets/img/pople-active.png" alt="">
                  <p>服务商</p>
              </div>
              <div class="foot-item " style="margin-left:1.3rem" v-else='$store.state.Index != 3' @click='onDealer'>
                  <img src="@/assets/img/pople.png" alt="">
                  <p>服务商</p>
              </div>
               <div class="foot-item active" v-if='$store.state.Index == 4'>
                  <img src="@/assets/img/money-active.png" alt="">
                  <p>钱包</p>
              </div>
              <div class="foot-item" v-else='$store.state.Index != 4' @click='onWallet'>
                  <img src="@/assets/img/money.png" alt="">
                  <p>钱包</p>
              </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
            }
        },
        methods:{
            onHome(){
                this.$router.push({ path: '/home' });
            },
            onUser(){
                this.$router.push({ path: '/userlist' });
            },
            onDealer(){
                this.$router.push({ path: '/dealer' });
            },
             onWallet(){
               this.$router.push({ path: '/wallet' });
            },
            onShare(){
                 this.$router.push({ path: '/share?dealerId='+localStorage.id});
            }
        },
    }
</script>

<style scoped>
    .footer{height:1.24rem;background: #fff;position: fixed;width: 100%;bottom: 0;left: 0;background: rgba(255,255,255,0)}
    .footBox{height: 0.98rem;width: 100%;border-top: solid 1px #eeeeee;padding: 0 0.28rem;margin-top: 0.26rem;width: 100%;background: #fff}
    .foot-item{height: 0.98rem;width:1.25rem;text-align: center;font-size: 0.2rem;color: #858585}
    .foot-item > img{width: 0.4rem;height: auto;margin-top: 0.15rem}
    .foot-item p{line-height: 0;margin-top:8px}
    .shareBox{height: 1.24rem;width: 0.95rem;}
    .shareBox img{height: 1.24rem;width: auto;position: absolute;top: 0rem;left: 3.1rem}
    .active{color: #ffc878}
</style>